<template>
  <div style="text-align: start;">

    <el-button type="primary" style="margin: 20px;" @click="open_insert_guige_dialog">新增规格</el-button>
    <Table ref="myTable" :param="table"></Table>

    <!-- 新增规格的弹出框 -->
    <el-dialog
      title="新增规格"
      :visible.sync="basic.dialogVisible2"
      width="30%">
      <div style="margin: 20px;">
        <div style="margin-bottom: 10px;">
          规格名称: <el-input placeholder="请输入规格名称" style="width: 50%;" v-model="form.gname"></el-input>
        </div>
        <div>
          规格描述: <el-input placeholder="请输入规格描述" style="width: 50%;" v-model="form.info"></el-input>
        </div>
      </div>

      <el-button type="success" @click="insertGuige">添加</el-button>

    </el-dialog>

    <!-- 查询规格可选值的弹出框 -->
    <el-dialog
      title="规格可选值列表"
      :visible.sync="basic.dialogVisible"
      width="30%">

      <el-tag
        :key="tag.id"
        v-for="tag in guigeVals.dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag.val}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="guigeVals.inputVisible"
        v-model="guigeVals.inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>


    </el-dialog>
  </div>
</template>

<script>
  import Table from "./Table"
  export default {
    components:{
      Table
    },
    //数据部分
    data(){
      return {
        form: {

        },
        basic: {
          dialogVisible: false,
          dialogVisible2: false
        },
        guigeVals: {
          dynamicTags: [],
          inputVisible: false,
          inputValue: '',
          guigeId: ''
        },
        table: {
          //表头
          title: [
            {title:"规格编号", attr:"id"},
            {title:"规格名称", attr:"gname"},
            {title:"规格描述", attr:"info"},
            {title:"创建时间", attr:"createTime"}
          ],
          //请求的url
          url: "/course/guige/list",
          //请求的数据
          data: {},
          //后续的操作按钮
          btns: {
            enable: true,
            //操作列表
            actions: [
              {btnName: "设置选项", callable: (val) => {
                 //获得当前的规格id
                 this.guigeVals.guigeId = val.id;
                 //弹窗
                 this.basic.dialogVisible = true;

                 //根据规格id将当前的可选值全部查询出来
                 this.$.ajax({
                   url: "/course/guige/vals",
                   data: {
                     gid: val.id
                   },
                   success: (data) => {
                      this.guigeVals.dynamicTags = data;
                   }
                 });
              }}
            ]
          },
          //分页参数
          page: {
            //是否需要开启分页的功能
            enable: true,
            //当前第几页
            pageNum: 1,
            //每页多少行记录
            pageSize: 5
          }
        }
      }
    },
    methods: {
      handleClose(tag) {
        // tag -> 被删除的记录
        this.guigeVals.dynamicTags.splice(this.guigeVals.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.guigeVals.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.guigeVals.inputValue;
        if(inputValue && inputValue.length > 0){
          //ajax请求后端进行规格值的设置
          this.$.ajax({
            url: "/course/guige/insertVal",
            data: {
              val: inputValue,
              gid: this.guigeVals.guigeId
            },
            success: (data) => {
              this.guigeVals.dynamicTags.push(data);
            }
          });
        }
        this.guigeVals.inputVisible = false;
        this.guigeVals.inputValue = '';
      },

      //新增规格的弹出框
      open_insert_guige_dialog(){
        this.basic.dialogVisible2 = true;
      },

      //新增规格
      insertGuige(){
        this.$.ajax({
          url: "/course/guige/insert",
          data: this.form,
          success: (data) => {
            //关闭弹窗
            this.basic.dialogVisible2 = false;
            //刷新表格
            this.$refs.myTable.request();
          }
        });
      }
    }
  }
</script>

<style>
    .el-tag {
      margin-right: 10px;
      margin-top: 10px;
    }
    .button-new-tag {
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      vertical-align: bottom;
    }
</style>
